<template>
  <GwContent>
    <GwTitle>组件：面板</GwTitle>
    <UiSection label="标题设置">
      <GwPanel header="使用属性" />
      <GwPanel>
        <template #header>
          <span style=" padding: 0 1em; font-size: 18px;border-left: 2px solid">使用 slot (重新定义一个头部样式)</span>
        </template>
      </GwPanel>
    </UiSection>

    <UiSection label="基础色彩：支持【深色】 模式">
      <GwPanel header="Default" />
      <GwPanel class="primary" header="Primary" />
      <GwPanel class="accent" header="Accent" />
      <GwPanel class="success" header="Success" />
      <GwPanel class="danger" header="Danger" />
      <GwPanel class="warning" header="Warning" />
      <GwPanel class="info" header="Info" />
    </UiSection>

    <UiSection label="扩展色彩：仅支持关键字和 hex 色彩，不支持【深色】 模式">
      <GwPanel color="pink" header="pink">Pink</GwPanel>
      <GwPanel color="#00ff7f" header="#00ff7f">#00ff7f</GwPanel>
    </UiSection>

    <UiSection label="掐头去尾">
      <GwPanel>仅保留身体</GwPanel>
      <GwPanel header="仅保留头部" :body-style="{padding: 0}" />
    </UiSection>
  </GwContent>
</template>

<script>
export default {
  name: 'DemoComponentPanel'
}
</script>

<style scoped>

.gw-panel:not(:last-child) {
  margin-bottom: 15px;
}
</style>
